<!--
@http://www.cnblogs.com/zhuweisky/p/3930780.html
-->
<!DOCTYPE html>
</html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h3>WebSocketTest</h3>
        <div id="login">
            <div>
                <!--192.168.1.33 家用    172.16.2.158 公司用  104.153.103.147 服务器-->
                <input id="serverIP" type="text" placeholder="服务器IP" value="192.168.1.33" autofocus="autofocus" />
                <input id="serverPort" type="text" placeholder="服务器端口" value="3369" />
                <input id="btnConnect" type="button" value="连接" onclick="connect()" />
            </div>
            <div>
            	<input id="btnCreateRoom" type="button" value="创建" onclick="onCreateRoomBtn()" />
            	<input id="btnJoinRoom" type="button" value="加入" onclick="onJoinRoomBtn()" />
                <input id="btnSendCard" type="button" value="出牌" onclick="onSendCardBtn()" />
                <input id="btnTakeGroup" type="button" value="取一组" onclick="onTakeGroupBtn()" />
                <input id="btnReturnRoom" type="button" value="返回" onclick="onReturnRoomBtn()" />
                <input id="btnKickPlayerOut" type="button" value="踢人" onclick="onKickPlayerOutBtn()" />
            </div>
            <div>
                <div>
                    发送至服务器
                </div>
                <textarea id="sendText" cols="100" rows="15">{"messageType":"room_create", "playerCount":3}</textarea>
                <input id="btnSend" type="button" value="发送" onclick="send()" />
            </div>
            <div>
                <div>
                    来自服务端的消息
                </div>
                <textarea id="txtContent" cols="100" rows="15" readonly="readonly"></textarea>
            </div>
        </div>
    </body>
    <script>
        var socket;
        
        function connect() 
        {
            var host = "ws://" + $("serverIP").value + ":" + $("serverPort").value + "/"
            socket = new WebSocket(host);
            try 
            {
                
                socket.onopen = function (msg) {
                    $("btnConnect").disabled = true;
                    alert("连接成功！");
            };
                
            socket.onmessage = function (msg) 
            {
                if (typeof msg.data == "string") 
                {
                        displayContent(msg.data);
                }
                else 
                {
                        alert("非文本消息");
                }
            };
                
            socket.onclose = function (msg) { alert("socket closed!") };
                                }
                                    catch (ex) {
                                        log(ex);
                                        }
                                        }

			function send() 
			{
			    var msg = $("sendText").value
			    socket.send(msg);
			}
	        
	        window.onbeforeunload = function () {
	            try {
	                socket.close();
	                socket = null;
	            }
	            catch (ex) {
	        }
	        };
	        
	        function $(id) { return document.getElementById(id); }
	        
	        Date.prototype.Format = function (fmt) { //author: meizz
	            var o = {
	                "M+": this.getMonth() + 1, //月份
	                "d+": this.getDate(), //日
	                "h+": this.getHours(), //小时
	                "m+": this.getMinutes(), //分
	                "s+": this.getSeconds(), //秒
	                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
	                "S": this.getMilliseconds() //毫秒
	            };
	            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
	            for (var k in o)
	                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
	            return fmt;
	    }
        
        function displayContent(msg) 
        {
            $("txtContent").value += "\r\n" +new Date().Format("yyyy/MM/dd hh:mm:ss")+ ":  " + msg;
        }

		function onkey(event) 
		{ 
			if (event.keyCode == 13) 
			{ 
				send(); 
			} 
		}

		function onCreateRoomBtn()
		{
			$("sendText").value = '{"messageType":"room_create", "playerName":"browser", "playerIcon":"1", playerCount":3}'
		}

        function onJoinRoomBtn()
        {
            $("sendText").value = '{"messageType":"room_join", "playerName":"browser", "playerIcon":"1", "playerCount":3, "roomID":3940}'
        }
    
        function onSendCardBtn()
        {
            $("sendText").value = '{"messageType":"game_play", "actionType":"sendACard", "playerIndex":2, "cardSend":0, "isAI": false}'
        }
    
        function onTakeGroupBtn()
        {
            $("sendText").value = '{"messageType":"game_play", "actionType":"takeAGroup", "playerIndex":2, "groupTake":0, "isAI": false}'
        }

        function onReturnRoomBtn()
        {
            $("sendText").value = '{"messageType":"room_return", "roomID":3940}'
        }

        function onKickPlayerOutBtn()
        {
            $("sendText").value = '{"messageType":"room_kick_out", "playerIndex":1}'
        }
</script>
</html>
